    <section class="section-color section-color-complement" id="make">
            <div class="container">
                <h2>Make a Timeline</h2>
                <p>
                    TimelineJS works on any site or blog. Make your own in four easy steps. <br>      <em>Having trouble? Watch our <a href="https://vimeo.com/143407878">video</a>, or see the <a href="#help">help section below</a>.</em>
                </p>
                <ol class="instructional-steps">
                    <li class="step grid">
                        <div class="step-number column-2">
                            <h6>Create your spreadsheet</h6>
                        </div>
                        <div class="step-details column-10">
                            <p>Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Make a Copy" button.</p>
                            <p>Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our <a href="#">help docs.</a></p>
                            <a class="button button-complement" href="https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/copy" target="_blank">Get the Spreadsheet Template &nbsp;<span class="icon-new-tab"></span></a>
                            <p class="note">Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
                        </div>
                    </li>
                    <li class="step grid">
                        <div class="step-number column-2">
                            <h6>Publish to the web</h6>
                        </div>
                        <div class="step-details column-10">
                            <div class="grid">
                                <div class="grid-item">
                                    <p>Under the File menu, select “Publish to the Web.”</p>
                                    <img class="img-shadow"  src="static/img/make/publish_to_web_small.png" />
                                    <p>In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.</p>
                                    <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
                                </div>
                                <div class="grid-item">
                                    <img class="img-shadow"  src="static/img/make/publish_to_web_button_small.png" />
                                    <img class="img-shadow"  src="static/img/make/publish_to_web_url_small.png" />
                                </div>
                            </div>
                            <p class="note note-alert">
                                The following has changed as of 18 July 2017!<br/><br/>
                                Close the 'Publish to the web' window. Copy the URL for your Timeline from the browser's address bar. It should look something like this:<br />
                                 <code>https://docs.google.com/spreadsheets/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/edit#gid=0</code>
                                <br/><br/>Disregard the URL that appears in the "publish to the web" window. It used to be used below, but changes to Google mean that you'll get an error if you use it now.
                            </p>
                        </div>
                    </li>

                    <li class="step grid" id="make-step-3">
                        <div class="step-number column-2">
                            <h6>Generate your timeline</h6>
                        </div>
                        <div class="step-details column-10">
                            <p>Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)</p>
                            <form>

                                <div class="grid grid-left ">
                                    <div class="input-group-label column-12">
                                        <label class="input-group-addon" for="inlinelabel">Google Spreadsheet URL</label>
                                        <input type="text" id="embed-source-url" placeholder="1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI" name="inlinelabel">
                                        <p id="embed-source-url-message" class="note note-alert note-error"></p>
                                    </div>
                                    <div class="input-group-label column-3">
                                        <label class="input-group-addon" for="inlinelabel">Width</label>
                                        <input type="text" value="100%" placeholder="100%" id="embed-width" class="input-mini">
                                    </div>
                                    <div class="input-group-label column-3">
                                        <label class="input-group-addon" for="inlinelabel">Height</label>
                                        <input type="text" value="650" placeholder="650" id="embed-height" class="input-mini">
                                    </div>
                                </div>
                            </form>

                            <div class="panel">
                                <form>
                                    <fieldset>
                                        <h5 style="margin-top:0;">Optional settings
                                            <a id="show-options">(show)<span class="caret"></span></a>
                                            <a id="hide-options">(hide)<span class="caret"></span></a>
                                        </h5>
                                        <p class="small"><em>Set language, fonts, starting slide and more.</em></p>
                                        <div class="more-options">
                                            <div class="grid">
                                                <!-- Language-->
                                                <div class="grid-item">
                                                    <h6>Language</h6>
                                                    <select id="embed-language">
                                                        <option value="en" data-lang="English">English</option>
                                                        <option value="en-24hr" data-lang="English (24-hour time)">English (24-hour time)</option>
                                                        <option value="ar" data-lang="Arabic">العربية</option>
                                                        <option value="af" data-lang="Afrikaans">Afrikaans</option>
                                                        <option value="id" data-lang="Indonesian">Bahasa Indonesia</option>
                                                        <option value="ms" data-lang="Malay">Bahasa Melayu</option>
                                                        <option value="be" data-lang="Belarusian">Беларуская мова</option>
                                                        <option value="bg" data-lang="Bulgarian">български език</option>
                                                        <option value="ca" data-lang="Catalan">Català</option>
                                                        <option value="cz" data-lang="Czech">Čeština</option>
                                                        <option value="da" data-lang="Danish">Dansk</option>
                                                        <option value="hi" data-lang="Hindi">हिन्दी</option>
                                                        <option value="de" data-lang="German">Deutsch</option>
                                                        <option value="et" data-lang="Estonian">Eesti keel</option>
                                                        <option value="el" data-lang="Greek">ελληνικά</option>
                                                        <option value="es" data-lang="Spanish">Español</option>
                                                        <option value="eo" data-lang="Esperanto">Esperanto</option>
                                                        <option value="eu" data-lang="Basque">Euskara</option>
                                                        <option value="fo" data-lang="Faroese">Føroyskt</option>
                                                        <option value="fr" data-lang="French">Français</option>
                                                        <option value="fy" data-lang="Frisian">Frysk</option>
                                                        <option value="ga" data-lang="Irish">Gaeilge</option>
                                                        <option value="gl" data-lang="Galician">Galego</option>
                                                        <option value="ko" data-lang="Korean">한국어</option>
                                                        <option value="hr" data-lang="Croatian">Hrvatski</option>
                                                        <option value="hy" data-lang="Armenian">Հայերէն</option>
                                                        <option value="is" data-lang="Icelandic">Íslenska</option>
                                                        <option value="it" data-lang="Italian">Italiano</option>
                                                        <option value="he" data-lang="Hebrew">עברית</option>
                                                        <option value="ka" data-lang="Georgian">ქართული</option>
                                                        <option value="lv" data-lang="Latvian">Latviešu valoda</option>
                                                        <option value="lb" data-lang="Luxembourgish">Lëtzebuergesch</option>
                                                        <option value="lt" data-lang="Lithuanian">Lietuvių kalba</option>
                                                        <option value="ro" data-lang="Romanian">Limba română</option>
                                                        <option value="hu" data-lang="Hungarian">Magyar</option>
                                                        <option value="my" data-lang="Myanmar"> မြန်မာ</option>
                                                        <option value="nl" data-lang="Dutch">Nederlands</option>
                                                        <option value="ne" data-lang="Nepali">नेपाली</option>
                                                        <option value="ja" data-lang="Japanese">日本語</option>
                                                        <option value="no" data-lang="Norwegian">Norsk</option>
                                                        <option value="th" data-lang="Thai">ภาษาไทย</option>
                                                        <option value="pl" data-lang="Polish">Polski</option>
                                                        <option value="pt" data-lang="Portuguese">Português</option>
                                                        <option value="pt-br" data-lang="Portuguese - Brazilian">Português (Brasil)</option>
                                                        <option value="rm" data-lang="Romansh">Rumantsch</option>
                                                        <option value="ru" data-lang="Russian">Русский язык</option>
                                                        <option value="si" data-lang="Sinhalese">සිංහල</option>
                                                        <option value="sl" data-lang="Slovenian">Slovenščina</option>
                                                        <option value="sk" data-lang="Slovak">Slovenčina</option>
                                                        <option value="sr" data-lang="Serbian - Latin">Srpski</option>
                                                        <option value="sr-cy" data-lang="Serbian - Cyrillic">српски</option>
                                                        <option value="fi" data-lang="Finnish">Suomi</option>
                                                        <option value="sv" data-lang="Swedish">Svenska</option>
                                                        <option value="zh-tw" data-lang="Taiwanese">Taiwanese</option>
                                                        <option value="tl" data-lang="Tagalog">Tagalog</option>
                                                        <option value="ta" data-lang="Tamil">தமிழ்</option>
                                                        <option value="te" data-lang="Telugu">తెలుగు</option>
                                                        <option value="tr" data-lang="Turkish">Türkçe</option>
                                                        <option value="uk" data-lang="Ukrainian">Українська</option>
                                                        <option value="ur" data-lang="Urdu">اُردُو</option>
                                                        <option value="vi" data-lang="Vietnamese">Tiếng Việt</option>
                                                        <option value="fa" data-lang="Farsi">فارسی</option>
                                                        <option value="zh-cn" data-lang="Chinese">中文</option>
                                                    </select>
                                                </div>

                                                <!-- Fonts-->
                                                <div class="grid-item" style="position: relative">
                                                    <h6>Fonts</h6>
                                                    <div id="embed-font-dropdown">
                                                        <p style="padding-top:4px;"><img id="font-pair-preview" src="static/img/make/default.png"></p>
                                                        <ul id="embed-font">
                                                            <li data-value="Default" id="embed-font-active" style="padding-top: 1rem"><img src="static/img/make/default.png" alt="PT Narrow and PT Serif"></li>
                                                            <li data-value="Abril-DroidSans"><img src="static/img/make/abril-droidsans.png" alt="Abril and Droid Sans"></li>
                                                            <li data-value="Amatic-Andika" checked=""><img src="static/img/make/amatic-andika.png" alt="Amatic and Andika"></li>
                                                            <li data-value="Bevan-PontanoSans"><img src="static/img/make/bevan-pontanosans.png" alt="Bevan and Pontano Sans"></li>
                                                            <li data-value="Bitter-Raleway"><img src="static/img/make/bitter-raleway.png" alt="Bitter and Raleway"></li>
                                                            <li data-value="Clicker-Garamond"><img src="static/img/make/clicker-garamond.png" alt="Clicker and Garamond"></li>
                                                            <li data-value="Dancing-Ledger"><img src="static/img/make/dancing-ledger.png" alt="Dancing and Ledger"></li>
                                                            <li data-value="Fjalla-Average"><img src="static/img/make/fjalla-average.png" alt="Fjalla and Average"></li>
                                                            <li data-value="Georgia-Helvetica"><img src="static/img/make/georgia-helvetica.png" alt="Georgia and Helvetica"></li>
                                                            <li data-value="Lustria-Lato"><img src="static/img/make/lustria-lato.png" alt="Lustria and Lato"></li>
                                                            <li data-value="Medula-Lato"><img src="static/img/make/medula-lato.png" alt="Medula One and Lato"></li>
                                                            <li data-value="OldStandard"><img src="static/img/make/oldstandard.png" alt="Old Standard"></li>
                                                            <li data-value="OpenSans-GentiumBook"><img src="static/img/make/opensans-gentiumbook.png" alt="Open Sans and Gentium Book"></li>
                                                            <li data-value="Playfair-FaunaOne"><img src="static/img/make/playfair-faunaone.png" alt="Playfair and Fauna One"></li>
                                                            <li data-value="Playfair"><img src="static/img/make/playfair.png" alt="Playfair SC and Playfair"></li>
                                                            <li data-value="PT"><img src="static/img/make/pt.png" alt="PT Sans, PT Sans Narrow, and PT Serif"></li>
                                                            <li data-value="Roboto-Megrim"><img src="static/img/make/roboto-megrim.png" alt="Roboto and Megrim"></li>
                                                            <li data-value="Rufina-Sintony"><img src="static/img/make/rufina-sintony.png" alt="Rufina and Sintony"></li>
                                                            <li data-value="UnicaOne-Vollkorn"><img src="static/img/make/unicaone-vollkorn.png" alt="Unica One and Vollkorn"></li>
                                                        </ul>

                                                    </div>
                                                </div>
                                                <div class="grid-item">
                                                    <h6>Map Type</h6>
                                                    <div id="embed-maptype">
                                                        <p class="small">Currently all Google's base maps are supported. When creating a Google map, style it the way you would like it to appear, and then paste the resulting link into your Google Spreadsheet.</p>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="grid-size-3 grid-left">
                                                <div class="grid-item">
                                                    <h6>Default start slide</h6>
                                                    <div class="input-group-label">
                                                        <label class="input-group-addon" for="inlinelabel">Slide</label>
                                                        <input type="text" value="0" placeholder="0" id="embed-startatslide" class="input-mini">
                                                    </div>
                                                    <p class="small"><em>You can tell TimelineJS to start at a specific slide number.</em></p>
                                                </div>
                                                <div class="grid-item">
                                                    <h6>Initial zoom level</h6>
                                                    <div class="input-group-label">
                                                        <label class="input-group-addon" for="inlinelabel">Zoom Level</label>
                                                        <input type="text" value="2" placeholder="2" id="embed-initialzoom" class="input-mini">
                                                    </div>
                                                    <p class="small"><em>The zoom level at which the timeline portion of TimelineJS will display on load. Specify a value from 0-10 (default is 2). Smaller numbers show a greater span of time.</em></p>
                                                </div>
                                            </div>


                                            <div class="grid grid-no-gutters">
                                                <div class="column-12">
                                                    <h6>Misc</h6>
                                                </div>
                                            </div>

                                            <div class="grid-size-3 grid-left">
                                                <div class="grid-item">
                                                    <label class="checkbox">
                                                        <input id="embed-startatend" type="checkbox" value="option1">Start at the end <br/><small style="display:block;margin-left:1.4rem;"><em>Begins the timeline on the last slide.</em></small>
                                                    </label>
                                                </div>
                                                <div class="grid-item">
                                                    <label class="checkbox">
                                                        <input id="embed-timenavtop" type="checkbox" value="option1">Show nav on top
                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>Switches the vertical order of the timeline navigation and the media.</em></small>
                                                    </label>
                                                </div>
                                                <div class="grid-item">
                                                    <label class="checkbox">
                                                        <input id="embed-debug" type="checkbox" value="option1">Debug
                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>In debug mode, the JavaScript console will display logging messages.</em></small>
                                                    </label>
                                                </div>
                                                <div class="grid-item">
                                                    <label class="checkbox">
                                                         <input id="embed-hash-bookmark" type="checkbox" value="option1">Use hash bookmarks
                                                        <br/><small style="display:block;margin-left:1.4rem;"><em>Assigns a hash bookmark to each slide's URL, allowing deep linking to slides. (For directly linked Timelines only -- does not work for iframe embeds)</em></small>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </li>

                    <li class="step grid">
                        <div class="step-number column-2">
                            <h6>Share your timeline</h6>
                        </div>
                        <div class="step-details column-10">
                            <h6>Share Link</h6>
                            <p class="small">Use this to link directly to your timeline. </p> <p class="small"><em>If you're embedding on Medium.com or other oembed-aware services, just paste this link on a line by itself where you want your timeline to appear.</em></p>

                            <!-- <ul class="list--social">
                                <li>
                                    <a class="link--no-style" href="#" ><span class="icon-twitter text-color-complement"></span></a>
                                </li>
                                <li>
                                    <a class="link--no-style" href="#"><span class="icon-facebook text-color-complement"></span></a>
                                </li>
                            </ul> -->
                            <form>
                                <textarea id="sharable-url" rows="3" type="text" "readonly" name="textplaceholder" value="" style="height:4rem;">
https://cdn.knightlab.com/libs/timeline/latest/embed/?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Bevan-PotanoSans&maptype=toner&width=600&height=600
                                </textarea>
                            </form>
                            <h6>Embed</h6>
                            <p class="small">Copy this embed code and paste it on your site where you want your timeline to appear (just like a YouTube video). </p>
                            <form>
                                <textarea id="embed_code" rows="3" readonly="readonly" type="text" name="textplaceholder" value="" style="height:5rem;">
&lt;iframe src=&apos;https://cdn.knightlab.com/libs/timeline/latest/embed/?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&amp;font=Bevan-PotanoSans&amp;maptype=toner&amp;width=600&amp;height=600&apos; width=&apos;600&apos; height=&apos;600&apos; frameborder=&apos;0&apos;&gt;&lt;/iframe&gt;
                                </textarea>
                            </form>
                            <a class="button button-complement" href="#preview-embed" id="iframe-preview-button">Preview</a>&nbsp;
                            <a class="button button-light" href="#" id="preview-embed-link" target="_blank">Open Preview in a new window  &nbsp;<span class="icon-new-tab"></span></a>
                        </div>
                    </li>
                </ol>
            </div>
            <div id="preview-embed">
                <div class="container">
                    <h3>Preview Embed</h3>
                </div>
                <section id="demo" class="container-fluid">
                    <div id="preview-embed-iframe" class="product-demo">
                        <iframe src="https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&amp;font=Default&amp;lang=en&amp;initial_zoom=2&amp;height=650" width="100%" height="650" frameborder="0"></iframe>
                    </div>
                </section>
            </div>
    </section>
